
<template>
    <u-tabbar
        :value="tabIndex"
        @change="onChangBar"
		placeholder
		fixed
		custom-style="border-radius: 20px 20px 0px 0px;border: 0px;"
    >
        <u-tabbar-item
            v-for="(item, index) in tabList"
            :text="item.text"
            :key="index">
			<view slot="text">
				<u-button color="linear-gradient(90deg, rgba(254, 244, 165, 1) 0%, rgba(255, 223, 32, 1) 100%)" shape="circle"
					@click="clickButton(item)" v-if="item.button" :custom-style="{padding: '8px 28px', color:`${textColor}`, fontSize: '16px', fontWeight: '700'}">{{item.text}}</u-button>
				<view v-else class="item">
					<view class="text-container">
						<text :class="{'text-mask': true, 'text-clear': tabIndex != index}">{{item.text}}</text>
						<view class="text-box">
							<text :class="{'text':true, 'text-active':tabIndex == index}">{{item.text}}</text>
						</view>
					</view>
					<view class="line" v-if="tabIndex == index"></view>
				</view>
			</view>
		</u-tabbar-item>
    </u-tabbar>
</template>

<script>
import {mapState, mapGetters} from "vuex";
import { systemInfo } from '@/utils/mixin';

export default {
	mixins: [systemInfo],
    computed: {
		...mapState(['tabIndex']),
		...mapGetters(['tabList'])
	},
	onLoad() {
		this.getSystemInfo();
	},
    methods: {
        async onChangBar(index) {
            if (this.tabIndex !== index) {
				const tab = this.tabList[index];
				if (tab.button) {
					this.tabIndex = this.$store.state.tabIndex;
					return;
				}
				
                await uni.$u.route({
                    type: "switchTab",
                    url: tab.pagePath,
                });
                this.$store.state.tabIndex = index;
            }
        },
		clickButton(item) {
			uni.navigateTo({
				url: item.pagePath
			})
		}
    },
};
</script>

<style lang="scss">
	.item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.text-container {
			position: relative;
		}
		
		.text-box {
			position: absolute;
			top: 1px;
			right: 0;
			bottom: -1px;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgba(187, 187, 187, 1);
		}
		
		.text-active {
			color: rgba(0, 0, 0, 1);
		}
		
		.text {
			font-size: 16px;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 21.95px;
		}
		
		.text-mask {
			height: 20px;
			font-size: 18px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 28.96px;
			color: rgba(186, 159, 7, 0.4);
		}
		
		.text-clear {
			opacity: 0;
		}
		
		.line {
			position: absolute;
			bottom: 0;
			width: 14px;
			height: 4px;
			border-radius: 6px;
			background: $main-color;
		}
	}
</style>